<template>
  <view class="product-action">
    <view class="im">
      <image class="service at-icon" :src="serviceIcon" />
      <AtButton
        class="service at-icon"
        size="mini"
        open-type="contact"
        bindcontact="handleContact"
      />
    </view>
    <view class="money-action">
      <view v-if="!isPoint" class="shoppingCarIconWraper">
        <AtBadge
          v-if="$store.state.products.shoppingCarList.length > 0"
          :value="$store.state.products.shoppingCarList.length"
        >
          <view
            class="shoppingCarIcon at-icon at-icon-shopping-cart"
            @tap="showShoppingCar"
          />
        </AtBadge>
        <view
          v-else
          class="shoppingCarIcon noWarper at-icon at-icon-shopping-cart"
          @tap="showShoppingCar"
        />
      </view>
      <view class="money-button-wraper">
        <view v-if="isPoint" class="shopping-car" @tap="orderNow"
          >立即兑换</view
        >
        <view v-else class="shopping-car" @tap="addToShoppingCar">
          加入购物车
        </view>
      </view>
    </view>
    <AtFloatLayout
      :isOpened="$store.state.products.isShowShoppingCar"
      :onClose="closeShoppingCar"
    >
      <view
        v-for="item in $store.state.products.shoppingCarList"
        :key="item.id"
      >
        <view>名称{{ item.product.name }}</view>
        <view>数量:{{ item.count }}</view>
        <image :src="getMainImageUrl(item.product)" />
      </view>
    </AtFloatLayout>
    <!-- <AtFloatLayout :isOpened="$store.state.confirmBuy" :onClose="closeBuy">
      <view>
        <view>{{ productDetails.name }}</view>
      </view>
    </AtFloatLayout> -->
  </view>
</template>

<script lang="ts">
import Taro from "@tarojs/taro";
import "./index.less";
import { AtFloatLayout, AtBadge, AtButton } from "taro-ui-vue";
import { getMainImageUrl } from "../../../../../services/products-service";
import serviceIcon from "../../../../../assets/images/service.svg";

export default {
  components: { AtFloatLayout, AtBadge, AtButton },
  props: {
    isPoint: {
      type: Boolean,
      default: false,
    },
    productDetails: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return { serviceIcon };
  },
  computed: {
    productId() {
      return this.productDetails.id;
    },
  },
  methods: {
    buyNow() {
      this.$store.commit("buyNow", this.productId);
    },
    addToShoppingCar() {
      this.$store.commit("addToShoppingCar", 1);
    },
    orderNow() {
      this.addToShoppingCar();
      this.$store.commit(
        "goToProductOrder",
        this.$store.state.products.shoppingCarList.filter(
          (item) => item.id === this.productId
        )
      );
      this.$store.commit("removeFromShoppingCar", [this.productId]);
      Taro.navigateTo({ url: "/pages/sales/order/confirm/index" });
    },
    closeShoppingCar() {
      // this.$store.commit("closeShoppingCar", false);
    },
    showShoppingCar() {
      Taro.navigateTo({ url: "/pages/sales/shopping-cart/index" });
      // this.$store.commit("openShoppingCar", true);
    },
    getMainImageUrl,
  },
};
</script>
<style lang="scss">
@import "~taro-ui-vue/dist/style/components/icon.scss";
@import "~taro-ui-vue/dist/style/components/float-layout.scss";
@import "~taro-ui-vue/dist/style/components/button.scss";
@import "~taro-ui-vue/dist/style/components/loading.scss";
</style>